<template>
  <div class="all_activity_detail">
    <Header-Comp :title="detailData.actTitle" :isBackApp="isBackApp" />
    <div class="content">
      <img :src="detailData.actPath" class="banner" />
      
      <div class="activity_about">
        <div class="activity_about_item">
          <div class="left">活动状态：</div>
          <div class="right">{{ detailData.timeStatus | timeStr }}</div>
        </div>
        <div class="activity_about_item">
          <div class="left">活动时间：</div>
          <div class="right">{{ detailData.activityTime }}</div>
        </div>
        <div class="activity_about_item">
          <div class="left">活动介绍：</div>
          <div class="right">
            {{ detailData.actMsg }}
          </div>
        </div>
      </div>
      <div class="activity_weal">
        <div class="weal_title">
          <div class="left_colour"></div>
          <span>活动权益</span>
        </div>
        <img :src="detailData.infoPath" class="long_img" />
      </div>
      <div class="add_now" @click="show2 = true">
        <div>立即参与</div>
      </div>
    </div>
    <!-- 面板1 -->
    <van-action-sheet v-model="show2">
      <div class="actionCard">
        <div class="actionCard-div_noBankCard" @click="nowAdd">
          <div class="leftInfo">
            <div class="title">还未申请过平安银行卡</div>
            <div class="tips">
              <div>
                <img src="../../../assets/img/tip.png" alt="">
              </div>
              <span>开卡后，成功换绑结算卡才完成活动参与流程哦!</span>
            </div>
          </div>
          <div class="btn">
            立即开卡
          </div>
        </div>
        <div class="actionCard-div_bankCard" @click="toApply">
          <div class="title">已有平安银行卡，直接报名</div>
          <div class="btn">
            立即报名
          </div>
        </div>
      </div>
    </van-action-sheet>
    <!-- 面板2 -->
    <van-action-sheet v-model="show">
      <div class="cardTip">开卡后，成功更换结算卡才完成活动参与流程哦！</div>
      <div class="steps">
        <div class="step" v-for="(item, i) in list" :key="i" @click="stepsChange(i, stepIndex >= i)">
          <!-- 左侧 -->
          <!-- <div class="step_left">{{ item.time }}</div> -->
          <!-- 中部 -->
          <div class="step_mid" :class="{ active: stepIndex >= i }">
            <div
              class="step_dot"
            >
              {{  i + 1 }}
            </div>
            <template v-if="i < list.length - 1">
              <div
                class="step_line"
              ></div>
            </template>
          </div>
          <!-- 右侧 -->
          <div 
            class="step_right" 
            :class="{ 
              active: stepIndex >= i, 
              'van-hairline--bottom':  i < list.length - 1
            }">
            <div class="left">
              <div class="step_name">{{ item.name }}</div>
              <div class="step_idea">{{item.msg}}</div>
            </div>
            
            <img class="forward" src="../../../assets/img/forward.png">
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { 
  bankActManage, 
  applyNow, 
  cardApply,
  qryApplyTabSts
} from "@/api/agent";
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      detailData: {},
      show: false,
      show2: false,
      isShowActivate: null,
      bankApplyUrl: '',
      isBackApp: false,
      list: [ 
        { time: '2021-5-13 12:56:15', name: '立即开卡', msg: '点击进入平安银行开卡链接。' }, 
        { time: '2021-5-14 12:56:15', name: '预约激活', msg: '点击进入平安银行卡激活链接， 预约成功后，请耐心等候工作人员联系。' }, 
        { time: '2021-5-15 12:56:15', name: '更换结算卡', msg: '银行卡激活成功后，更换结算卡，即可完成 活动参与流程啦！' }, 
      ]
    };
  },
  filters: {
    timeStr(num) {
      let mapSource = {
        0: "未开始",
        1: "进行中",
        2: "已结束",
      };
      return mapSource[num];
    },
  },
  computed: {
    ...mapGetters(['stepIndex'])
  },
  async mounted() {
    await this.getDetail();
    if(this.$route?.query?.token) {
      this.$store.dispatch('SET_STEP_INDEX', 0)
      this.bankApplyUrl = localStorage.setItem('bankApplyUrl', '')
      this.isBackApp = true
    } else {
      this.isBackApp = false
    }
    this.bankApplyUrl = localStorage.getItem('bankApplyUrl')
    if(this.bankApplyUrl) {
      this.nowAdd()
      this.show = true
    }
  },
  methods: {
    // 操作步骤栏点击事件
    stepsChange(i, canClick) {
      console.log('stepsChange', i , this.stepIndex, canClick)
      // 非高亮步骤 禁止点击
      if(!canClick) return

      const { userId, type } = this.$route.query
      const { deptId } = this.detailData
      switch(i) {
        case 0:
          // 步骤一点击
          this.cardApplyHandler("O").then(({ applyFlag, applyStatus, bankApplyUrl }) => {
            if(applyFlag == "R"){
              this.$notify({ type: 'primary', message: ('请勿重复报名') })
            }else if(applyFlag == "F"){
              this.$notify({ type: 'primary', message: ('无效报名') })
            }else if(applyFlag == "S" && bankApplyUrl){
              window.location.href = bankApplyUrl
            }
          })
        break
        case 1: 
          // 步骤二点击
          this.cardApplyHandler("A").then(({ applyFlag, applyStatus, bankApplyUrl }) => {
            if(applyFlag == "S" && bankApplyUrl){
              window.location.href = bankApplyUrl
            }else{
              this.$notify({ type: 'primary', message: ('激活失败') })
            }
          })
        break;
        case 2: 
          // 步骤三点击
          this.$router.push({
            // name: 'settleinfo', 
            path: "/mreinfo/settleedit",
            query: { id: userId, deptId, isBack: 1, type}
          })
        break
      }
    },
    toApply(){
      // 立即报名
      const { id: actId,userId , storeId, type } = this.$route.query
      const { deptId } = this.detailData
      this.show2 = false
      applyNow({
        actId, storeId, deptId
      }).then(res => {
        const { applyFlag } = res.data.data
        if(applyFlag == 'R'){
          this.$toast("重复报名");
        }else if(applyFlag == 'S'){
          // 报名成功 跳转换绑卡页面
          this.$router.push({
            path: "/mreinfo/settleedit", 
            query: { id: userId, deptId, isBack: 1, type}
          })
        }else if(applyFlag == 'S2'){
          // 报名成功 并且已换卡，
          this.$toast("活动报名中");
        }else{
          this.$toast("报名失败");
        }
      })
    },
    nowAdd(){
      // 立即开卡
      const { id: actId, storeId } = this.$route.query
      const { deptId } = this.detailData
      this.show2 = false
      qryApplyTabSts({
        actId, storeId, deptId
      }).then(res => {
        console.log('res',res)
        const { code, data: { applyStatus } , msg } = res.data
        if(code == 200){
          if(['F','N'].includes(applyStatus)){

            // F,N 高亮 步骤1
            this.$store.dispatch('SET_STEP_INDEX', 0)
            this.show = true
          }else if(['Q','W'].includes(applyStatus)){

            // Q,W 高亮 步骤1,2
            this.$store.dispatch('SET_STEP_INDEX', 1)
            this.show = true
          }else if(['J'].includes(applyStatus)){

            // J 高亮全部
            this.$store.dispatch('SET_STEP_INDEX', 2)
            this.show = true
          }else{
            // 其余状态 提示报名成功
            this.$notify({ type: 'success', message: '报名成功' });
          }
        }else{
          // 异常状态码 直接弹框提示
          this.$notify({ type: 'primary', message: msg })
        }
      })
    },
    //预约申请
    cardApplyHandler(urlType) {
      // urlType  O:查询开卡状态  A：约申请
      return new Promise(rel => {
        const { id: actId, storeId } = this.$route.query
        const { deptId } = this.detailData

        cardApply({ actId, storeId, deptId, urlType }).then(res => {
          console.log('res',res)
          const { code, msg, data } = res.data
          if(code == 200){
            rel(data)
          }else{
            // 异常状态码 直接弹框提示
            this.$notify({ type: 'primary', message: msg })
          }
        })
      })
    },
    getDetail() {
      return bankActManage(this.$route.query).then((res) => {
        const { data } = res
          let nowTime = new Date().getTime()
          let start = new Date(data.data.actStartTime.replace(/-/g,'/'))
          let end = new Date(data.data.actEndTime.replace(/-/g,'/'))
          let startTime = start.getTime()
          let endTime = end.getTime()
          let startStr = `${start.getFullYear()}年${start.getMonth() + 1}月${start.getDate()}日`
          let endStr = `${end.getFullYear()}年${end.getMonth() + 1}月${end.getDate()}日`
          let mergeStr = startStr + '-' + endStr
          data.data.activityTime = mergeStr
          let timeStatus = startTime > nowTime ? 0 : (startTime < nowTime && endTime > nowTime ? 1 : 2)
          data.data.timeStatus = timeStatus
          this.detailData = data.data
          return data.data
      });
    },
  },
};
</script>



<style lang="less" scoped>
.all_activity_detail {
  height: 100%;
  background: #f9f9f9;
  box-sizing: border-box;
  .content {
    padding: 20px 32px 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .banner {
      width: 100%;
      height: 240px;
      border-radius: 6px;
    }
    .add_now {
      background: #FFFFFF;
      box-shadow: 0px 0px 4px 0px rgba(34,34,34,0.1);
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 20px 32px;
      div{
        background: #FFB72F;
        border-radius: 8px;
        font-size: 31px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        height: 80px;
        line-height: 80px;
      }
    }
    
    .activity_about {
      padding: 40px 30px;
      margin-top: 28px;
      background: #ffffff;
      border-radius: 12px;

      .activity_about_item {
        &.activity_about_item:first-child {
          margin-top: 0;
        }
        margin-top: 35px;
        display: flex;
        .left {
          white-space: normal;

          font-size: 28px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #131313;
        }
        .right {
          font-size: 28px;
          font-family: PingFang SC;
          color: #131313;
          width: 480px;
        }
      }
    }
    .activity_weal {
      margin-top: 52px;
      width: 100%;
      .weal_title {
        display: flex;
        .left_colour {
          width: 6px;
          height: 32px;
          background: #ffb72f;
          margin-right: 11px;
        }
        font-size: 30px;
        line-height: 32px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #131313;
      }
    }
    .long_img {
      margin-top: 30px;
      width: 100%;
    }
  }
  .cardTip{
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #131313;
    padding: 50px 0 0;
    text-align: center;
  }
  .steps {
    margin-top: 50px;
	.step {
		display: flex;
		.step_left {
			width: 140px;
			margin-top: -14px;
			font-size: 26px;
			line-height: 36px;
			text-align: right;
		}
		.step_mid {
			width: 50px;
			display: flex;
			flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
			margin: 0 25px;
      &.active{
        .step_dot{
          background-color: #FFB72F;
        }
        .step_line{
          border-color:#FFB72F;
        }
      }
			.step_dot {
				width: 38px;
				height: 38px;
				line-height: 38px;
				background: #dcdcdc;
				border-radius: 50%;
				color: #ffffff;
				font-size: 22px;
				text-align: center;
			}
			.active_dot {
				background: #2a62ed;
				border: 5px solid #e3ebff;
			}
			.step_line {
        flex: 1;
        margin: 10px 0;
        border-left: 4px dotted #dcdcdc;
			}
			.active_line {
				background: #2a62ed;
			}
		}
		.step_right {
			width: 100%;
			height: fit-content;
			padding: 0 40px 25px 0;
			border-radius: 10px;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 41px;
      &.active{
        color: #FFB72F;
      }
      .forward {
        height: 30px;
      }
			div {
				width: 90%;
			}
			.step_name {
        font-size: 34px;
        line-height: 34px;
        font-family: PingFang SC;
        font-weight: bold;
				margin-bottom: 22px;
			}
			.step_idea {
				color: #999999;
				font-size: 28px;
				line-height: 40px;
			}
		}
	}
}
  .actionCard{
    padding: 35px;
    width: 750px;
    .actionCard-div_noBankCard{
      background: linear-gradient(90deg, #FFE6BE 0%, #FFF6E5 100%);
      border-radius: 15px;
      padding: 0 45px;
      height: 173px;
      display: flex;
      align-items: center;
      .leftInfo{
        flex: 1;
        .title{
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #795224;
          margin-bottom: 15px;
        }
        .tips{
          font-size: 22px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #131313;
          line-height: 30px;
          opacity: 0.8;
          display: flex;
          img{
            width: 20px;
            margin-right: 11px;
          }
          span{
            flex: 1;
          }
        }
      }
      .btn{
        width: 150px;
        height: 60px;
        line-height: 60px;
        background: #FFB72F;
        border-radius: 30px;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        margin-left: 51px;
      }
    }
    .actionCard-div_bankCard{
      background: linear-gradient(90deg, #C7D6FC 0%, #E9F0FE 100%);
      border-radius: 15px;
      padding: 35px 45px;
      margin-top: 17px;
      height: 173px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title{
        font-size: 30px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #3C4987;
      }
      .btn{
        width: 150px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: #3498FF;
        border-radius: 30px;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }
}
</style>